<template>
	<view class="content">
		<view class="flex flex-col justify-start items-center">
			<view class="flex flex-row justify-start items-center w100">
				<view class="flex flex-row items-center justify-start w200">
					<text class="f_32 c_6">姓名</text>
					<text class="orange f_32">*</text>
				</view>
				<view class="mright">
					<input type="text" value=""  v-model="name" placeholder="请填写姓名"/>
				</view>
				
			</view>
			<view class="flex flex-row justify-start items-center w100 ">
				<view class="flex flex-row items-center justify-start w200">
					<text class="f_32 c_6">性别</text>
					<text class="orange f_32">*</text>
				</view>
				<view class="mright flex flex-row justify-start items-center">
					<view class="flex flex-row justify-start items-center mr60" @click="sexone('男')">
						<i class="iconfont icon-xuanzhong c_blue" v-if="sex=='男'"></i>
						<i class="iconfont icon-weixuanzhong" v-else></i>
						<text class="f_32 c_6 ml10  " :class="sex=='男'?'c_blue':''">男</text>
					</view>
					<view class="flex flex-row justify-start items-center"   @click="sexone('女')">
					<i class="iconfont icon-xuanzhong c_blue" v-if="sex=='女'"></i>
					<i class="iconfont icon-weixuanzhong" v-else></i>
						<text class="f_32 c_6 ml10"  :class="sex=='女'?'c_blue':''">女</text>
					</view>
				</view>
				
			</view>
			
			<view class="flex flex-row justify-start items-center w100 ">
				<view class="flex flex-row items-center justify-start w200">
					<text class="f_32 c_6">年龄</text>
					<text class="orange f_32">*</text>
				</view>
				<view class="mright">
					<input type="text" value=""  v-model="age" placeholder="请填写年龄"/>
				</view>
				
			</view>
				<view class="flex flex-row justify-start items-center w100 ">
					<view class="flex flex-row items-center justify-start w200">
						<text class="f_32 c_6">身份证</text>
						<text class="orange f_32">*</text>
					</view>
					<view class="mright">
						<input type="text" value=""  v-model="idcard" placeholder="请填写身份证号"/>
					</view>
					
				</view>
				
				<view class="flex flex-row justify-start items-center w100 ">
					<view class="flex flex-row items-center justify-start w200">
						<text class="f_32 c_6">家庭住址</text>
						<text class="orange f_32">*</text>
					</view>
					<view class="mright">
						<input type="text" value=""  v-model="address" placeholder="请输入(例:凤凰小区18栋101)" style="width: 500rpx"/>
					</view>
					
				</view>
				<view class="flex flex-row justify-start items-center w100 ">
					<view class="flex flex-row items-center justify-start w200">
						<text class="f_32 c_6">手机号</text>
						<text class="orange f_32">*</text>
					</view>
					<view class="mright">
						<input type="text" value=""  v-model="phone" placeholder="请填写手机号"/>
					</view>
					
				</view>
				<view class="flex flex-row justify-start items-center w100 ">
					<view class="flex flex-row items-center justify-start w200">
						<text class="f_32 c_6">短信验证</text>
						<text class="orange f_32">*</text>
					</view>
					<view class="mright flex flex-row justify-between" style="width: 500rpx;">
						<input type="text" value=""  v-model="code" placeholder="请输入验证码" style="width: 300rpx;"/>
						<view class="box-item-code c_blue" @tap="countDown">{{ tip }}</view>
					</view>
					
				</view>
				
			
				<view class="flex flex-col justify-between items-start w100  ">
					<view class="flex flex-row items-center justify-start w200">
						<text class="f_32 c_6">详细描述</text>
						<text class="orange f_32">*</text>
					</view>
					<textarea value="" placeholder="请详细描述信息" v-model="desc" />
				
				</view>
				<view class="flex flex-col justify-between items-start w100  bgwhite mt_40" style="margin-bottom: 150rpx;">
					<view class="flex flex-col items-center justify-center items_tu" @click="upload"
						v-if="d_img==''">
						<i class="iconfont icon-jiahao c_80 f_32"></i>
						<text class="f_20 c_80 mt10">点击添加附件照片</text>
					</view>
					<view class="" v-else @click="upload">
						<image :src="d_img" mode="" style="width: 288rpx;height: 162rpx;border-radius: 10rpx;">
						</image>
					</view>
				
				</view>
		</view>
	
		<view class="fixedbtn flex flex-row justify-between  u-fixed-bottom">
		
		  <view class="btn background_blue" :class="{'mb_20': !isIPhoneX}" @click="sub_draw">
		    提交</view>
		
		
		</view>
	</view>
</template>

<script>
	
	import {getFormatDate} from "@/common/js/util.js";
	import http from 'common/js/http.js';
	export default {
		mixins:[http],
		data() {
			const [year,month,date]=getFormatDate().split("-");
			return {
				desc:'',
				ad:'',
				idcard:'',
				age:'',
				code:'',
				
					isIPhoneX: this.isIPhoneX,
				datevak:'',
			name:'',
			sex:'',
			phone:'',
			address:'',
			dang:'',
			company:'',
			dateTimeDefault:{
				startTime:year+'-'+month+'-'+date
			},
			dateDefault:{
				year:year,
				month:year+'-'+month,
				startTime:year+'-'+month+'-'+date
			},
			minDate:{
				year: 1921,
				month: 7,
				date: 23,
				hour:6,
				minute:30,
				second:20
			},
			time:0,
			 tip: '获取验证码',
			 fs:true,
			 d_img:''
			}
		},
		onLoad() {

		},
		methods: {
			upload() {
				// 选取本地图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
			
						this.tempFilePath = res.tempFilePaths[0];
						console.log(res)
						uni.uploadFile({
							url: 'https://cun.polarislaser.cn/api/volunteer/upload',
			
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'content-type': 'multipart/form-data'
							},
							success: e => {
								console.log(e)
								this.d_img = JSON.parse(e.data).data.fullurl
								//	that.tailorPath = that.$util.img(res.data)
							},
							fail: function(err) {
								console.log('err', err)
							},
							complete: function(e) {
			
								console.log(e)
			
							}
						})
					}
				});
			},
			
			countDown(){
			  if(this.phone=='') {
			    return uni.showToast({
			      title: '请输入正确的手机号',
			      icon: 'none'
			    })
			  }
			  console.log(222)
			   if (this.time == 0) {
				   
			     this.time = 60
				 if(this.fs){
					 this.fs=false
					 this.sendRequest({
						 url:'government/sendSms',
						 data:{
							 mobile:this.phone
						 },
						 success:res=>{
							 uni.showToast({
							 	title:'发送成功'
							 })
						 }
					 })
				 }
			     var timer = setInterval(() =>{
			       this.time--;
			       this.tip = this.time+'秒';
			       if(this.time==0){
			         clearInterval(timer)
			         this.tip = '获取验证码'
					 this.fs=true
			       }
			    },1000)
			   }
			},
			sub_draw(){
				if(this.name==''){
					this.$util.showToast({
						title:'请填写姓名',
						
					})
					return 
				}
				if(this.age==''){
					this.$util.showToast({
						title:'请填写年龄',
						
					})
					return 
				}
				if(this.sex==''){
					this.$util.showToast({
						title:'请选择性别',
						
					})
					return 
				}
				
				if(this.phone==''){
					this.$util.showToast({
						title:'请填写手机号',
						
					})
					return 
				}
				if(this.code==''){
					this.$util.showToast({
						title:'请输入手机验证码',
						
					})
					return 
				}
				if(this.address==''){
					this.$util.showToast({
						title:'请填写居住地址',
						
					})
					return 
				}
				if(this.idcard==''){
					this.$util.showToast({
						title:'请填写身份证号',
						
					})
					return 
				}
			if(this.desc==''){
				this.$util.showToast({
					title:'请详细描述信息',
					
				})
				return 
			}
						
			
				uni.showLoading({
					title:'提交中'
				})
				this.sendRequest({
					url: 'government/addneighborhood',
					data: {
						town_id:1,
						name:this.name,
						mobile:this.phone,
						code:this.code,
						description:this.desc,
						idcard:this.idcard,
						age:this.age,
						gender:this.sex,
						address:this.address,
						image:this.d_img,
						description:this.desc
					},
					success: res => {
						console.log(res)
						uni.hideLoading()
						if (res.code == 1) {
											
								this.$util.showToast({
									title: '提交成功!'
								})
								
							
							setTimeout(e => {
								
								uni.navigateBack()
							}, 1500)
						
						}else{
							this.$util.showToast({
								title: res.msg
							})
						
						}
					}
				})
			},
			opentime(){
				this.$refs.timePop.show();	
			},
				timeChange(val){
					console.log(val)
					this.datevak = val
				},
				sexone(e){
					this.sex = e
				}
		
		}
	}
</script>

<style lang="scss">
	.items_tu {
		width: 288rpx;
		height: 162rpx;
		background: #F5F6F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	
	}
	
	textarea {
		height: 150rpx;
		padding: 40rpx;
		margin-top: 20rpx;
		background-color: #F9F9F9;
	}
	.w100{
		background: #fff;
		border-bottom: 1rpx solid #f9f9f9;
		padding: 30rpx 20rpx;
	}
	.content{
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
	}
	.orange{
		margin-left:  10rpx;
	}
	.w200{
		width: 200rpx;
	}
	.w320{
		width: 360rpx;
	}
	.mright{
		
	}
</style>